<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <!-- <el-button type="primary">统计</el-button> -->
        <el-button @click="exportExcel" :disabled="!buttonsPermissions.DaoChu"
          :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''">导出</el-button>
        <el-button :disabled="!buttonsPermissions.DaYin" :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint">打印(P)</el-button>
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.orderNumberParam" :placeholder="placeholder" />
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="div_screen">
          <div class="screen_left">
            <div class="custom_item">
              <div class="item_title">统计方式</div>
              <div class="custom_select_head">
                <el-select @change="selectTjfs" placeholder v-model="queryData.type" style="width:100%;">
                  <el-option v-for="item in tjfsOptions" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="custom_item" style="width: 240px;" v-if="queryData.type == 1">
              <div class="item_title">商品名称</div>
              <el-tooltip effect="dark" :content="getDictTextById(spmcOptions, goodsId, 'goodsName')" :enterable="false"
                placement="bottom-start" :disabled="this.getHideToolTipById(spmcOptions, goodsId, 'goodsName')">
                <div class="custom_select_head">
                  <el-select v-model="goodsId" style="width:100%;" filterable
                    @visible-change="(value) => handleFilterMethod('', 'goodsName')"
                    :filter-method="(value) => handleFilterMethod(value, 'goodsName')">
                    <el-option v-for="item in spmcOptions" :key="item.id" :label="item.goodsName"
                      :value="item.id"></el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowCommodity"></i>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <div class="custom_item" style="width: 240px;" v-if="queryData.type == 2">
              <div class="item_title">供应商</div>
              <el-tooltip effect="dark" :content="getDictTextById(gysOptions, xghCompanyId, 'companyName')"
                :enterable="false" placement="bottom-start"
                :disabled="this.getHideToolTipById(gysOptions, xghCompanyId, 'companyName')">
                <div class="custom_select_head">
                  <el-select v-model="xghCompanyId" style="width:100%;" filterable ref="deptSelect"
                    @visible-change="(value) => handleFilterMethod('', 'companyName')"
                    :filter-method="(value) => handleFilterMethod(value, 'companyName')">
                    <el-option v-for="item in gysOptions" :key="item.id" :label="item.companyName"
                      :value="item.id"></el-option>
                  </el-select>
                  <div class="custom_more">
                    <i class="el-icon-more" @click.stop="onShowSupplier"></i>
                  </div>
                </div>
              </el-tooltip>
            </div>
            <!-- 经手人 -->
            <div class="custom_item" v-if="queryData.type == 3">
              <div class="custom_star">
                <div class="item_title">经手人</div>
              </div>
              <div class="custom_select_head">
                <el-select v-model="sysUserId" style="width:100%;" filterable ref="deptSelect"
                  @visible-change="(value) => handleFilterMethod('', 'realname')"
                  :filter-method="(value) => handleFilterMethod(value, 'realname')">
                  <el-option v-for="item in jsrOptions" :key="item.id" :label="item.realname"
                    :value="item.id"></el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="screen_right">
            <el-select @change="changeDate" v-model="monthValue">
              <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-date-picker v-model="nowDate" type="daterange" range-separator="~" start-placeholder="开始日期"
              end-placeholder="结束日期" @change="onClickPicker" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button type="primary" @click="onQuery">查询</el-button>
          </div>
        </div>
        <div v-show="queryData.type == 1" class="table_content">
          <el-table ref="tableRefBySp" show-summary :summary-method="getSummaries" highlight-current-row
          border
            :header-cell-style="{
              background: '#E3F6FF',
            }" :data="tableData.records" height="100%" @sort-change="changeSort">
            <el-table-column :label="item.label" v-for="(item, index) in spColumnData" :key="index">
              <template v-for="(v, i) in item.subset">
                <el-table-column :show-overflow-tooltip="true" v-if="v.zidingyiState" :key="i" :prop="v.props"
                  :label="v.morenName" min-width="150px" :sortable="v.sortable" border
                  :resize="v.props=='goodsId_dictText'?true:false"
                  :width="v.props == 'xh' ? '50px' : v.props == 'goodsNumber' ? '170px' : ''">
                <template slot-scope="scope">
                  <span v-if="v.props == 'goodsId_dictText'" style="width: 100%; white-space: normal;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; ">{{scope.row[v.props]}}</span>
                  <span v-else>{{  scope.row[v.props]}}</span>
                </template>
                </el-table-column>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="queryData.type == 2" class="table_content">
          <el-table ref="tableRefByGys" show-summary :summary-method="getSummaries" highlight-current-row
            :data="tableData.records" height="100%" @sort-change="changeSort">
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in khColumnData">
              <el-table-column :show-overflow-tooltip="true" :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName" :prop="item.props" min-width="120px"
                v-if="item.zidingyiState" :sortable="item.sortable"
                :width="item.props == 'orderNumber' ? '170px' :''"></el-table-column>
            </template>
          </el-table>
        </div>
        <div v-show="queryData.type == 3" class="table_content">
          <el-table ref="tableRefByJsr" show-summary :summary-method="getSummaries" highlight-current-row
            :data="tableData.records" height="100%" @sort-change="changeSort">
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <template v-for="(item, index) in ywyColumnData">
              <el-table-column :show-overflow-tooltip="true" :key="index"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName" :prop="item.props" min-width="120px"
                v-if="item.zidingyiState" :sortable="item.sortable"
                :width="item.props == 'orderNumber' ? '170px' : ''"></el-table-column>
            </template>
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-sizes="[20, 50, 100, 200]" :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes" :total="tableData.total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration ref="setColumnRef" :columnDataArr="columnData" :defaultColumnDataArr="defaultColumnData"
      :orderType="orderType" @onSaveColumn="onSaveColumn"></CConfiguration>
    <!-- 选择供应商弹框 -->
    <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
    <!-- 新增供应商弹框 -->
    <DialogSupplierAdd ref="supplierAddRef" :newData="newData" @dialogVisibleClose="onCloseAddSupplier"
      @onAddSubmit="onAddSupplier"></DialogSupplierAdd>
    <!-- 新增员工弹框 -->
    <DialogStaffAdd ref="staffAddRef" :newData="newStaffData" @dialogVisibleClose="onCloseAddStaff"
      @onAddSubmit="onAddStaff"></DialogStaffAdd>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
    <!-- 选择商品弹框 -->
    <DialogCommoditySingle ref="commodityRef" @onSelectCommodity="onSelectCommodity"></DialogCommoditySingle>
  </div>
</template>

<script>
import CConfiguration from '@/components/c_column/columnConfiguration1'
import DialogCommoditySingle from '@/views/components/dialogCommoditySingle'
import DialogSupplier from '../../components/dialogSupplier'
import DialogSupplierAdd from '../../components/dialogSupplierAdd'
import DialogStaffAdd from '../../components/dialogStaffAdd'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms } from '@/utils/index'
import { delcommafy, formatMoney, formatNumber, formatPrice, getLikeCompanyId } from '../../../utils'
export default {
  name: 'orderStatistics',
  components: {
    CConfiguration,
    DialogSupplier,
    DialogSupplierAdd,
    DialogStaffAdd,
    dialogPrint,
    DialogCommoditySingle
  },
  mixins: [JeecgListMixin],
  computed: {
    buttonsPermissions() { return handlePermissions('采购订单统计') },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
  },
  created() {
    this.getData()
    // this.buttonsPermissions = handlePermissions('采购订单统计')
  },
  updated() {
    this.$nextTick(() => {
      this.$refs['tableRefBySp'].doLayout()
      this.$refs['tableRefByGys'].doLayout()
      this.$refs['tableRefByJsr'].doLayout()
    })
  },
  data() {
    return {
      // 存储按钮权限数据
      // buttonsPermissions: {},
      orderType: '采购订单统计-按商品汇总', //控制列配置的单据类型
      // 统计方式
      tjfsOptions: [
        {
          value: '1',
          label: '按商品汇总',
        },
        {
          value: '2',
          label: '按供应商',
        },
        {
          value: '3',
          label: '按经手人',
        },
      ],
      spmcOptions: [], //商品名称
      // 供应商
      gysOptions: [],
      newData: {}, // 新增供应商数据
      // 经手人
      jsrOptions: [],
      newStaffData: {}, // 新增经手人数据
      // 查询条件数据
      xghCompanyId: '', // 供应商id
      sysUserId: '', // 经手人id
      goodsId: '', //商品id
      queryData: {
        orderNumberParam: '', // 单据编号/往来单位
        companyIdParam: '',
        type: '1',
        beginDate: '', // 开始时间
        endDate: '', // 结束时间
      },
      placeholder: '请输入商品名称\\条码\\编码\\规格\\拼音码',
      // 月份选择
      monthValue: '本月',
      monthOptions: ['今日', '本周', '本月', '本年'],
      nowDate: [],
      // 表格数据
      tableData: {},
      // 按商品汇总列名
      spColumnData: [
        {
          props: 'jbxx',
          label: '基本信息',
          subset: [
            {
              morenName: '序号',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'xh',
            },
            {
              morenName: '商品编号',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
              props: 'goodsNumber',
              sortable: true,
            },
            {
              morenName: '商品名称',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'goodsId_dictText',
              sortable: true,
            },
            {
              morenName: '规格',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'norms',
            },
            {
              morenName: '单位',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'unit',
            },
          ],
        },
        {
          props: 'dhqk',
          label: '订货情况',
          subset: [
            {
              morenName: '订货数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'allNumber',
              sortable: true,
            },
            {
              morenName: '金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'allPrice',
              sortable: true,
            },
          ],
        },
        {
          props: 'zxqk',
          label: '执行情况',
          subset: [
            {
              morenName: '已到货数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'arrivalNumber',
              sortable: true,
            },
            {
              morenName: '金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'arrivalAmount',
              sortable: true,
            },
            {
              morenName: '终止数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'terminationQuantity',
              sortable: true,
            },
            {
              morenName: '金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'terminationAmount',
              sortable: true,
            },
          ],
        },
        {
          props: 'dzx',
          label: '待执行',
          subset: [
            {
              morenName: '未到货数量',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'notArrivalNumber',
              sortable: true,
            },
            {
              morenName: '金额',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: true,
              props: 'notArrivalAmount',
              sortable: true,
            },
          ],
        },
      ],
      // 按供应商汇总列名
      khColumnData: [
        {
          morenName: '供应商编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'companyNumber',
          sortable: true,
        },
        {
          morenName: '供应商名称',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'companyId_dictText',
          sortable: true,
        },
        {
          morenName: '订货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'allNumber',
          sortable: true,
        },
        {
          morenName: '订货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'allPrice',
          sortable: true,
        },
        {
          morenName: '已到货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'arrivalNumber',
          sortable: true,
        },
        {
          morenName: '已到货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'arrivalAmount',
          sortable: true,
        },
        {
          morenName: '终止数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'terminationQuantity',
          sortable: true,
        },
        {
          morenName: '终止金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'terminationAmount',
          sortable: true,
        },
        {
          morenName: '未到货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'notArrivalNumber',
          sortable: true,
        },
        {
          morenName: '未到货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'notArrivalAmount',
          sortable: true,
        },
      ],
      // 按经手人汇总列名
      ywyColumnData: [
        {
          morenName: '人员编号',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'personNo',
          sortable: true,
        },
        {
          morenName: '经手人',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'userId_dictText',
          sortable: true,
        },
        {
          morenName: '订货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'allNumber',
          sortable: true,
        },
        {
          morenName: '订货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'allPrice',
          sortable: true,
        },
        {
          morenName: '已到货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'arrivalNumber',
          sortable: true,
        },
        {
          morenName: '已到货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'arrivalAmount',
          sortable: true,
        },
        {
          morenName: '终止数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'terminationQuantity',
          sortable: true,
        },
        {
          morenName: '终止金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'terminationAmount',
          sortable: true,
        },
        {
          morenName: '未到货数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'notArrivalNumber',
          sortable: true,
        },
        {
          morenName: '未到货金额',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'notArrivalAmount',
          sortable: true,
        },
      ],
      columnData: [], //传递给列配置组件的列名
      defaultColumnData: [],
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      updateId: '', // 修改列配置时返回的id
      url: {
        listUrl: '/xghPurchaseOrder/xghPurchaseOrder/purchaseCount',
        exportXlsUrl: '/xghPurchaseOrder/xghPurchaseOrder/exportPurchaseCountXls'
      },
      api: '',
      billName: '采购订单统计',
    }
  },
  mounted() { },
  methods: {
    getParams(param) {
      let result = {
        ...param
      }
      if (this.queryData.type == 1) {
        result.goodsId = this.goodsId
      } else if (this.queryData.type == 2) {
        result.companyId = this.xghCompanyId
      } else if (this.queryData.type == 3) {
        result.userId = this.sysUserId
      }
      return result
    },
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      let data = {
        ...this.queryData,
        companyIdParam: getLikeCompanyId(this.gysOptions, this.queryData.orderNumberParam),
        pageSize: 1000000,
        pageNo: 1,
      }
      data = this.getParams(data)
      let printExclusive = []
      const res = await getAction(this.url.listUrl, data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      printExclusive = res.result.records || []
      printExclusive.forEach((item, index) => {
        item['xh'] = index + 1
      })
      const pricearr = []
      const monarr = ['allPrice', 'arrivalAmount', 'terminationAmount', 'notArrivalAmount']
      const numarr = ['allNumber', 'arrivalNumber', 'terminationQuantity', 'notArrivalNumber']
      printExclusive = (res.result.records || []).map((item) => {
        // 遍历 item 对象的键
        Object.keys(item).map((key) => {
          if (numarr.includes(key)) {
            item[key] = formatNumber(item[key])
          } else if (monarr.includes(key)) {
            item[key] = formatMoney(item[key])
          } else if (pricearr.includes(key)) {
            item[key] = formatPrice(item[key])
          }
        })
        return item
      })
      this.onQuery()
      // 打印
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.beginDate + '~' + this.queryData.endDate,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, this.columnData, this.orderType)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.orderType, (() => {
              this.$refs.print.show(printData, this.columnData, this.orderType)
            }))
          } else {
            this.$refs.print.show(printData, this.columnData, this.orderType)
          }
        }
      }
    },
    // 初始化获取数据
    getData() {
      this.getTimeRange(this.$setTimeRange(5)) // 默认获取当月时间
      this.getTableData() // 获取表格信息数据
      this.getGysStorage() // 获取供应商信息数据
      this.getStaffData() // 获取经手人信息数据
      this.columnData = JSON.parse(JSON.stringify(this.spColumnData))
      this.selectTitle()
      this.getGoodsNameList()
    },
    // 初始化查询列配置值
    async selectTitle() {
      this.api = this.orderType
      let obj = await this.$setColumn.selectColumn(this.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        if (this.queryData.type == 1) {
          this.spColumnData = JSON.parse(JSON.stringify(obj.columnData))
        } else if (this.queryData.type == 2) {
          this.khColumnData = JSON.parse(JSON.stringify(obj.columnData))
        } else if (this.queryData.type == 3) {
          this.ywyColumnData = JSON.parse(JSON.stringify(obj.columnData))
        }
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.api, this.columnData, 0, this.updateId)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      if (this.queryData.type == 1) {
        let nIndex = 0
        this.spColumnData.forEach((lItem, lIndex) => {
          let subList = lItem.subset
          if (lIndex > 0) {
            nIndex += this.spColumnData[lIndex - 1].subset.length
          }
          let list = []
          let count = 0 //记录隐藏的个数
          subList.forEach((item, index) => {
            let nItem = value[nIndex + index]
            list.push(nItem)
            if (!nItem.zidingyiState) {
              count++
            }
          })
          lItem.subset = list
          lItem.show = !(count == list.length)
          this.spColumnData.splice(lIndex, 1, lItem)
        })
        console.log(this.spColumnData);
        this.columnData = JSON.parse(JSON.stringify(this.spColumnData))

        // this.spColumnData = JSON.parse(JSON.stringify(value))
      } else if (this.queryData.type == 2) {
        this.khColumnData = JSON.parse(JSON.stringify(value))
        this.columnData = JSON.parse(JSON.stringify(value))
      } else if (this.queryData.type == 3) {
        this.ywyColumnData = JSON.parse(JSON.stringify(value))
        this.columnData = JSON.parse(JSON.stringify(value))
      }

      
      let res = await this.$setColumn.editColumn(this.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    async getTableData() {
      let data = {
        ...this.queryData,
        companyIdParam: getLikeCompanyId(this.gysOptions, this.queryData.orderNumberParam),
        pageSize: this.pagesize,
        pageNo: this.currentPage,
      }
      data = this.getParams(data)
      const res = await getAction(this.url.listUrl, data)
      if (res.code !== 200) {
        return this.$elMessage.error('获取数据失败！')
      }
      this.tableData = res.result
      this.tableData.records.forEach((item, index) => {
        item['xh'] = index + 1
        item.allNumber = formatNumber(item.allNumber)
        item.allPrice = formatMoney(item.allPrice)
        item.notArrivalAmount = formatMoney(item.notArrivalAmount)
        item.notArrivalNumber = formatNumber(item.notArrivalNumber)
        item.terminationAmount = formatMoney(item.terminationAmount)
        item.terminationQuantity = formatNumber(item.terminationQuantity)
        item.arrivalAmount = formatMoney(item.arrivalAmount)
        item.arrivalNumber = formatNumber(item.arrivalNumber)
      })
    },
    getGoodsNameList() {
      getAction('/xghGoods/xghGoods/getGoodsNameList', {}).then((res) => {
        if (res.code === 200) {
          this.spmcOptions = res.result
          this.totalGoods = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    getGysStorage() {
      getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
        if (res.code === 200) {
          this.gysOptions = res.result
          this.totalCompanys = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 获取所有经手人数据
    async getStaffData() {
      getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
        if (res.code === 200) {
          this.jsrOptions = res.result
          this.totalPersons = res.result
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 统计
    // 导出
    exportExcel() {
      let companyIdParam = ''
      if (this.queryData.orderNumberParam) {
        let companyIdParamList = []
        for (let index = 0; index < this.gysOptions.length; index++) {
          const element = this.gysOptions[index];
          if (element.companyName.indexOf(this.queryData.orderNumberParam) > -1) {
            companyIdParamList.push(element.id)
          }
        }
        if (companyIdParamList.length) {
          companyIdParam = companyIdParamList.toString()
        }
      }
      let data = {
        ...this.queryData,
        companyIdParam,
        fileName: '采购订单统计'
      }
      data = this.getParams(data)
      this.handleExportXlsByStaff('采购订单统计', data)
    },
    // 搜索/查询
    onQuery() {

      this.getTableData()
    },
    // 打开选择商品弹出框
    onShowCommodity() {
      this.$refs.commodityRef.dialogVisible = true
    },
    // 当前选择商品数据
    onSelectCommodity(val) {
      this.goodsId = val.id
    },
    // 刷新
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      // this.buttonsPermissions = handlePermissions('采购订单统计')
      this.getData()
    },
    // 选择统计方式
    selectTjfs(val) {
      console.log(val);
      this.tableData = []
      if (val == 1) {
        this.orderType = '采购订单统计-按商品汇总'
        this.placeholder = '请输入商品名称\\条码\\编码\\规格\\拼音码'
        this.columnData = JSON.parse(JSON.stringify(this.spColumnData))
      } else if (val == 2) {
        this.orderType = '采购订单统计-按供应商汇总'
        this.placeholder = '请输入往来单位名称关键字搜索'
        this.columnData = JSON.parse(JSON.stringify(this.khColumnData))
      } else if (val == 3) {
        this.orderType = '采购订单统计-按经手人汇总'
        this.placeholder = '请输入经手人关键字搜索'
        this.columnData = JSON.parse(JSON.stringify(this.ywyColumnData))
      }
      this.selectTitle()
      this.getTableData()
    },
    // 打开新增供应商弹出框
    onShowSupplierAdd() {
      this.$refs.supplierAddRef.dialogVisible = true
    },
    // 新增供应商数据
    onAddSupplier(res) {
      // 先清空新增供应商时的数据
      this.newData = this.$options.data().newData
      // 把当前新增值的供应商名称展示在输入框内,做数据存储
      this.onSelectSupplier(res)
      // 调用子组件的数据更新方法
      this.$refs.supplierRef.getData()
    },
    // 关闭新增供应商弹框
    onCloseAddSupplier() {
      this.newData = this.$options.data().newData
    },
    // 打开选择供应商弹出框
    onShowSupplier() {
      this.$refs.supplierRef.dialogVisible = true
    },
    // 当前选择供应商数据
    onSelectSupplier(val) {
      this.xghCompanyId = val.id
    },
    // 打开新增经手人的弹框
    onShowStaffAdd() {
      this.$refs.staffAddRef.dialogVisible = true
    },
    // 获取新增经手人数据
    async onAddStaff(val) {
      const res = await postAction('/xgh/sysUser/add', val)
      if (res.code === 200) {
        // 新增经手人成功之后重新获取经手人数据
        this.getStaffData()
      }
    },
    // 关闭新增经手人时清空
    onCloseAddStaff() {
      this.newStaffData = this.$options.data().newStaffData
    },
    // 单据状态改变
    onChangeQueryData() {
      this.getTableData()
    },
    // 判断当前选择时间段
    changeDate(val) {
      switch (val) {
        case '全部':

          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
      this.getTableData()
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.beginDate = data.now
      this.queryData.endDate = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.beginDate = val[0]
      this.queryData.endDate = val[1]
      this.getTableData()
    },
    // 触发列配置弹框
    onShowColumn () {
      console.log();
      if (this.queryData.type == 1) {
        // this.defaultColumnData = JSON.parse(JSON.stringify(this.$options.data().spColumnData))
        let list = []
        for (let index = 0; index < this.spColumnData.length; index++) {
          const element = this.spColumnData[index];
          let sub = element.subset
          list = list.concat(sub)
        }
        let defaultList = []
        for (let index = 0; index < this.defaultColumnData.length; index++) {
          const element = this.defaultColumnData[index];
          let sub = element.subset
          defaultList = defaultList.concat(sub)
        }
        this.$refs.setColumnRef.loadData(list, defaultList)

      } else if (this.queryData.type == 2) {
        this.defaultColumnData = JSON.parse(JSON.stringify(this.$options.data().khColumnData))
        this.$refs.setColumnRef.dialogVisible = true
      } else if (this.queryData.type == 3) {
        this.defaultColumnData = JSON.parse(JSON.stringify(this.$options.data().ywyColumnData))
        this.$refs.setColumnRef.dialogVisible = true
      }

    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      let arr = ['allNumber', 'allPrice', 'notArrivalAmount', 'notArrivalNumber', 'terminationAmount', 'terminationQuantity', 'arrivalAmount', 'arrivalNumber']
      const numarr = ['allNumber', 'notArrivalNumber', 'terminationQuantity', 'arrivalNumber']
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.tableData.total + '条明细'
        } else if (arr.indexOf(column.property) > -1) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (numarr.includes(column.property)) {
              sums[index] = this.$formatNumber(sums[index])
            } else {
              sums[index] = this.$formatMoney(sums[index])
            }
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData()
    },
    // 历史记录数据去重并只展示三个数据方法
    selectDataHas(arr) {
      let map = new Map()
      for (const item of arr) {
        if (!map.has(item.id)) {
          map.set(item.id, item)
        }
      }
      let newArr = [...map.values()]
      return newArr.slice(0, 3)
    },
    // 数据排序，传入列名和排序方式
    changeSort(val) {
      this.queryData.sortName = val.prop // 排序参数
      this.queryData.isSort = val.order // ascending == 1正序  descending == 2 倒序
      this.getTableData()
    },
    // 搜索
    handleFilterMethod(value, label) {
      if (label == 'companyName') {
        this.gysOptions = this.filterMethod(this.gysOptions, value, label)
      } else if (label == 'storehouseName') {
        this.ckOptions = this.filterMethod(this.ckOptions, value, label)
      } else if (label == 'realname') {
        this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
      } else if (label == 'goodsName') {
        this.spmcOptions = this.filterMethod(this.spmcOptions, value, label)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 102px);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;

  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }

    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
    }

    ::v-deep .el-select {
      width: 70px;
      height: 40px;
      box-sizing: border-box;
      margin-right: 0.187512rem;

      .el-input {
        .el-input__inner {
          height: 40px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
    }

    .selectSty {
      width: 2.625164rem;
    }
  }

  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 250px;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 60px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;

    .div_screen {
      width: 100%;
      height: 50px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .screen_left {
        font-size: 12px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 600px;
      }

      .screen_right {
        margin-right: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        box-sizing: border-box;

        ::v-deep .el-button {
          // width: 60px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          border-radius: 5px;
          border: none;
        }

        ::v-deep .el-select {
          width: 80px;
          margin: 0 10px;

          .el-input {
            .el-input__inner {
              height: 30px;
              border-color: #e3e3e3;
              font-size: 12px;
              padding-left: 5px;
            }

            .el-input__suffix {
              height: 30px;
              display: flex;
              align-items: center;
            }
          }
        }

        ::v-deep .el-date-editor {
          width: 220px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #d9d9d9;
          margin-right: 0.112507rem;
          padding: 3px 6px;

          .el-range__icon {
            position: absolute;
            right: 0;
            line-height: 30px;
          }

          .el-range-separator {
            line-height: 24px;
          }

          .el-range-input {
            font-size: 12px;
          }

          .el-range__close-icon {
            display: none;
          }
        }
      }
    }

    .table_content {
      height: calc(100% - 150px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        height: 100%;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            line-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            // background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 0.25rem;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 0.25rem;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover>td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        .el-table__header {
          tr {
            &:last-child {
              th {
                background: rgb(237, 237, 237) !important;
              }
            }
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      .total {
        margin-top: 0.25rem;
        width: 3.750234rem;
        font-size: 12px;
        color: #666666;
      }

      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 10px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

.custom_item {
  display: flex;
  font-size: 12px;
  align-items: center;
  margin: 10px 10px 10px 0;
  width: 180px;
}

.item_title {
  padding: 0 5px;
  width: auto;
  min-width: 60px;
  line-height: 30px;
  color: #666666;
  text-justify: distribute-all-lines;
  /*ie6-8*/
  text-align-last: justify;
  /* ie9*/
  -moz-text-align-last: justify;
  /*ff*/
  -webkit-text-align-last: justify;
  /*chrome 20+*/
}

.custom_select_head {
  flex: 1;
  height: 30px;
  position: relative;

  ::v-deep .el-select {
    .el-input {
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  ::v-deep .el-input {
    width: 100%;

    .el-input__inner {
      height: 30px;
      border-color: #e3e3e3;
      font-size: 12px;
      padding-left: 5px;
    }

    .el-input__suffix {
      height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

.custom_more {
  position: absolute;
  right: 10px;
  z-index: 10;
  top: 1px;
  background: #fff;
  height: 28px;
  display: flex;
  align-items: center;
  color: #bfbfbf;
}

.custom_add {
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    margin-left: 5px;
    color: #666666;
  }

  i {
    color: #666666;
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>